<template>
  <div class="demo-progress">
    <el-progress :percentage="50" :stroke-width="15" striped />
    <el-progress :percentage="30" :stroke-width="15" status="warning" striped striped-flow />
    <el-progress :percentage="100" :stroke-width="15" status="success" striped striped-flow :duration="10" />
    <el-progress :percentage="percentage" :stroke-width="15" status="exception" striped striped-flow :duration="duration" />
  </div>
  <slot :html="html" />
</template>

<script lang="ts" setup>
import { computed, ref } from "vue";

const percentage = ref<number>(70);
const duration = computed(() => Math.floor(percentage.value / 10));

const html = ref(`
<template>
  <div class="demo-progress">
    <el-progress :percentage="50" :stroke-width="15" striped />
    <el-progress
      :percentage="30"
      :stroke-width="15"
      status="warning"
      striped
      striped-flow
    />
    <el-progress
      :percentage="100"
      :stroke-width="15"
      status="success"
      striped
      striped-flow
      :duration="10"
    />
    <el-progress
      :percentage="percentage"
      :stroke-width="15"
      status="exception"
      striped
      striped-flow
      :duration="duration"
    />
    <el-button-group>
      <el-button :icon="Minus" @click="decrease" />
      <el-button :icon="Plus" @click="increase" />
    </el-button-group>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue'

const percentage = ref<number>(70)
const duration = computed(() => Math.floor(percentage.value / 10))
<\/script>

<style scoped>
.demo-progress .el-progress--line {
  margin-bottom: 15px;
  width: 350px;
}
</style>

`);
</script>

<style scoped>
.demo-progress .el-progress--line {
  margin-bottom: 15px;
  width: 350px;
}
</style>
